/*
https://flutter.cn/docs/development/ui/layout

 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('grid and list'),
        ),
        body: Center(
          child: _buildGrid(),
        ),
      ),
    );
  }
}

/*

  GridView
  使用 GridView 将 widget 作为二维列表展示。 GridView 提供两个预制的列表，或者你可以自定义网格。当 GridView 检测到内容太长而无法适应渲染盒时，它就会自动支持滚动。

  摘要 (GridView)
  在网格中使用 widget

  当列的内容超出渲染容器的时候，它会自动支持滚动。

  创建自定义的网格，或者使用下面提供的网格的其中一个：

  GridView.count 允许你制定列的数量

  GridView.extent 允许你制定单元格的最大宽度


 */

//使用 GridView.extent 创建一个最大宽度为 150 像素的网格。

Widget _buildGrid() => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(30),
    );

List<Container> _buildGridTileList(int count) => List.generate(
    count,
    (index) =>
        Container(child: Image.asset('images/grid_and_list/pic$index.jpg')));
